<template>
  <div class="">
    <p style="margin-top: 30px; font-size: 18px; font-weight: 700">
      Cancer Metabolites
    </p>

    <el-table
      v-loading="loading"
      element-loading-text="Data generation in progress..."
      empty-text="no pathway found"
      @sort-change="typeSort"
      :data="tableData.list"
      :default-sort="{prop: 'date', order: 'descending'}"
      style="width: 100%"
    >
      <el-table-column sortable="custom" prop="Cancer" label="Cancer" />

      <el-table-column sortable="custom" prop="Pathway" label="Pathway" />
      <el-table-column sortable="custom" prop="Category" label="Category" />
      <el-table-column
        sortable="custom"
        prop="Set/In Set"
        label="Set / In Set"
      />
      <el-table-column sortable="custom" prop="pValue" label="pValue" />
      <el-table-column sortable="custom" prop="FDR" label="FDR" />
      <el-table-column
        sortable="custom"
        prop="Metabolites"
        label="Metabolites"
      />
    </el-table>

    <div
      style="
        text-align: center;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
      "
    >
      <el-pagination
        v-model:current-page="Search.CancerType.pageNo"
        v-model:page-size="Search.CancerType.pageSize"
        :page-sizes="[2, 5, 10, 20, 30, 50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Search.CancerTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, reactive, onUpdated, defineProps} from "vue";
import {useRouter, useRoute} from "vue-router";
import {useCounterStore} from "../../pina/index";
import Metabolites from "./Metabolites.vue";
import {getSearch, gettsv} from "../../api/index";
import {jcancerType} from "../dta/cancerTye";
import Papa from "papaparse";

const router = useRouter();
const store = useCounterStore();

const props = defineProps(["cancerValue"]);

const options = jcancerType;
let tableData = reactive({list: []});
const Search = reactive({
  CancerType: {
    sortField: "pathway",
    pageSize: 10,
    pageNo: 1,
    sortDesc: "desc",
    cancerType: "",
  },
  CancerTotal: 0,
});
let zongData = [];
let loading = ref(false);
const getdata = async () => {
  loading.value = true;
  gettsv("/Static/Cancer Metabolites.tsv").then((res) => {
    Papa.parse(res, {
      header: true, // 指定第一行为标题行
      dynamicTyping: true, // 自动转换数据类型
      complete: function (results) {
        // 处理解析完成的结果

        zongData = results.data;

        tableData.list = zongData.slice(0, 10);
        Search.CancerTotal = results.data.length;
        // 这里可以将 data 传递给其他函数或者保存到状态中
      },
    });
    loading.value = false;
  });
  // 不能删
  // Search.CancerType.cancerType = cancerValue.value;
  // loading.value = true;
  // const {data} = await getSearch(Search.CancerType);
  // tableData.list = data.dataList;
  // Search.CancerTotal = data.total;
  // loading.value = false;
};

const shaixuan = (e) => {
  console.log(props.cancerValue);

  let a = [];
  if (props.cancerValue) {
    a = zongData.filter((item) => {
      return item.Cancer == props.cancerValue;
    });
  } else {
    a = zongData;
  }
  Search.CancerTotal = a.length - 1;
  let b = [];
  if (Search.CancerType.pageNo == 1) {
    b = a.slice(0, Search.CancerType.pageSize);
  } else {
    let num = Search.CancerType.pageSize * (Search.CancerType.pageNo - 1);

    let numa = Search.CancerType.pageSize;

    b = a.slice(num, num + numa);
  }
  tableData.list = b;
};
const handleSizeChange = (e) => {
  shaixuan();
};
const handleCurrentChange = (e) => {
  shaixuan();
};
const typeSort = (e) => {
  let da = e.prop;
  if (e.order == "descending") {
    e.order = "desc";
  }
  if (e.order == "ascending") {
    e.order = "asc";
  }

  zongData.sort((a, b) => {
    let modifier = 1;
    if (e.order === "desc") modifier = -1;

    if (a[e.prop] < b[e.prop]) return -1 * modifier;
    if (a[e.prop] > b[e.prop]) return 1 * modifier;
    return 0;
    // return e.order == "desc"
    //   ? b[`${da}`] - a[`${da}`]
    //   : a[`${da}`] - b[`${da}`];
  });

  shaixuan();
  Search.CancerType.sortField = e.prop;
  Search.CancerType.sortDesc = e.order;
};
getdata();
defineExpose({
  shaixuan,
});
</script>

<style></style>
